<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  #box{width: 600px;height: 400px;background: #fff;margin: 100px auto;position: relative;}
  strong,p{width: 100%;height: 30px;line-height: 30px;background: rgb(49,58,62);display: inline-block;text-align: center;color: #F9BC28;font-size: 24px;}
  strong{position: absolute;top: 0;}
  p{position: absolute;bottom: 0;}
  img{width: 100%;height: 100%;}
  ul{width: 50px;position: absolute;left: -60px;top: 0;}
  li{width: 50px;height: 50px;margin-bottom: 10px;background: #666666;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Div = document.getElementById("box");
      function fun(lab){
       return Div.getElementsByTagName(lab);
      }
      var Str = fun('strong');
      var Img = fun('img');
      var P = fun('p');
      var Ul = fun('ul');
      var Li = fun('li');
      var arr_pic = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"] ;
      var arr_name = ["图片一","图片二","图片三","图片四","图片五"];
      var num = 0;
      var timer = null;
      for (var i = 0; i < arr_pic.length; i++) {
        Ul[0].innerHTML += '<li></li>' ;
      };
  //-------------------------------------------图片自动切换部分
      function cart(){
        timer = setInterval(function(){
          num++;
          num %= arr_pic.length;
          inital(num)
          },1000)
      }
      setTimeout(cart,1000)
      Div.onmouseover = function(){
        clearTimeout(timer)
      }
      Div.onmouseout = cart;
  //-------------------------------------------
      function inital(n){
        Img[0].src = arr_pic[n];
        Str[0].innerHTML = 1 + n + "/" + arr_pic.length;
        P[0].innerHTML = arr_name[n];
        for (var i = 0; i < Li.length; i++) {
          Li[i].style.background = "#666666";
        };
        Li[n].style.background = "#FCD13C";
      }
      inital(num);
      for (var i = 0; i < Li.length; i++) {
        Li[i].index = i;
        Li[i].onclick = function(){
          num = this.index;
          inital(this.index);
        }
      };
    }
  </script>
</head>
<body>
  <div id="box">
    <strong>2123</strong>
    <img src="">
    <p></p>
    <ul></ul>
  </div>
</body>
</html>